<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>TubePlayer</title>
		<link type="text/css" href="css/smoothness/jquery-ui-1.8.18.custom.css" rel="stylesheet" />	
		<link type="text/css" href="css/style.css" rel="stylesheet" />
		
		<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
		<script type="text/javascript" src="js/jquery-ui-1.8.18.custom.min.js"></script>
		<script type="text/javascript" src="js/jquery.dataTables.js"></script>
		<script type="text/javascript" src="js/jquery.dataTables.rowReordering.js"></script>
		<script type="text/javascript" src="js/jquery.jstree.js"></script>
		<script type="text/javascript" src="js/TableTools.js"></script>
		<script type="text/javascript" src="js/jquery.blockUI.js"></script>	
		<script type="text/javascript" src="js/library.js"></script>	
			
		<style type="text/css" title="currentStyle">
			@import "media/css/demo_page.css";
			@import "media/css/demo_table_jui.css";
			@import "media/css/TableTools_JUI.css";
		</style>
		
		<style type="text/css">
			.bold { font-weight: bold !important; }
			.center { text-align: center; }
			body{ font: 62.5% "Lucida Grande", Verdana, Arial, Helvetica, sans-serif;}
			.demoHeaders { margin-top: 2em; }
			#dialog_link {padding: .4em 1em .4em 20px;text-decoration: none;position: relative;}
			#dialog_link span.ui-icon {margin: 0 5px 0 0;position: absolute;left: .2em;top: 50%;margin-top: -8px;}
			ul#icons {margin: 0; padding: 0;}
			ul#icons li {margin: 2px; position: relative; padding: 4px 0; cursor: pointer; float: left;  list-style: none;}
			ul#icons span.ui-icon {float: left; margin: 0 4px;}
			
			
			form label, form input { display:block; }
			input.text { margin-bottom:12px; width:95%; padding: .4em; }
			input.text.small { width: 50px; }
			fieldset { padding:0; border:0; margin-top:25px; }
			h1 { font-size: 1.2em; margin: .6em 0; }
			.ui-dialog .ui-state-error { padding: .3em; }
			.validateTips { border: 1px solid transparent; padding: 0.3em; }
			
			.separator {
				float: left;
				width: 30px;
				border: 0;
				background: none;
			}
			
			#restoreFileAttach {
				position:absolute;  
				/* start of transparency styles */  
				opacity:0;  
				-moz-opacity:0;  
				filter:alpha(opacity:0);  
				/* end of transparency styles */  
				z-index:2; /* bring the real upload interactivity up front */  
				width:270px;  
				  cursor: pointer; cursor: hand;
			}
			
			#options-tab label {
				display: block;
			}
				
			
		</style>	
	</head>
	<body>
	<div id="wrapper">
	
		<div id="tabs">
			<ul>
				<li><a href="#library-tab">Library</a></li>
				<li><a href="#playlists-tab">Playlists</a></li>
				<li><a href="#options-tab">Options</a></li>
			</ul>
			<div id="library-tab">
				<div style="height: 50px;">
					<a id="addNewSong">Add new song</a>
					<a id="addNewChannel">Add new channel</a>
					<a id="addNewGenre">Add new genre</a>
				</div>
				<br style="clear: both;" />
				
				<div id="library_tree" class="demo tree" style="float:left;width:250px;overflow: hidden;">
				</div>

				
				<div id="listing" class="listingContainer" style="float: left; margin-left: 20px;">
				</div>
			
				<br style="clear: both;" />
			</div>
			
			
			
			<div id="playlists-tab">
				<div style="height: 50px;">
					<a id="addNewPlaylist" class="jButton">Add new playlist</a>
				</div>
				<br style="clear: both;" />
				
				
				<div id="playlists_tree" class="demo tree" style="float:left;width:250px;overflow: hidden;">
				</div>
				
				<div id="playlists_listing" class="listingContainer" style="float: left; margin-left: 20px;">
					
				</div>
			
				<br style="clear: both;" />
			
			
			</div>
			
			<div id="options-tab">
				
				<h2>Options</h2>
				
				<label><input type="checkbox" class="optionButton showPopupOnNewSong" data-name="showPopupOnNewSong"> Show popup on new song</label>
				<label><input type="checkbox" class="optionButton loadLastPlaylistOnStart" data-name="loadLastPlaylistOnStart"> Load last playlist on player start</label>
				<label><input type="checkbox" class="optionButton playLastPlaylistOnStart" data-name="playLastPlaylistOnStart"> Play last playlist on player start</label>
				
				
				
				<h2>Backup/Restore</h2>
				<p>Backup/Restore, as the name suggests, allows you to quickly backup (or restore) all of your FMP settings</p>
				<p>There are four options available:
					<ul>
					<li><strong>Backup to File</strong> - this option will backup all of your FMP settings and save them in the file on your comptuter (available for both anonymous and registered users)</li>
					<li><strong>Restore from File</strong> - this option will restore all of your FMP settings from the previously exported file on your comptuter (available for both anonymous and registered users</li>
					<li><strong>Backup to Server</strong> - this option will backup all of your FMP settings to our webserver (only for registered and logged in users). The advantage of this option is that you will be able to restore your settings from anywhere in the world</li>
					<li><strong>Restore from Server</strong> - this option will restore all of your FMP settings from our webserver, that you have already exported (only for registered and logged in users)</li>
					</ul>
				</p>
				<p id="backupButtons">
					<button id="backupFile">Backup to File</button>
					
					<input type="file" value="Browse for attachment" id="restoreFileAttach" name="settingsFile">  
					<button id="restoreFile">Restore from File</button>
					
					<button id="backupServer" class="server">Backup to Server</button>
					<button id="restoreServer" class="server">Restore from Server</button>
				</p>
			</div>
		</div>
		
		<div id="dialog-song" title="Add new song">
			<p class="validateTips"></p>
			<form>
			<fieldset>
				<div id="new_song_form_url">
					
					<label for="name">Enter song url</label>
					<input type="text" name="new_song_url" id="new_song_url" class="text ui-widget-content ui-corner-all" />
					<a id="new_song_cancel" class="clickable" style="display: none;">x</a>
				</div>
				
				<div style="display: none;" id="new_song_form" />
					<label for="new_song_artist">Artist</label>
					<input type="text" name="new_song_artist" id="new_song_artist" value="" class="text ui-widget-content ui-corner-all" />
					<label for="new_song_title">Title</label>
					<input type="text" name="new_song_title" id="new_song_title" class="text ui-widget-content ui-corner-all" />
					
					<label for="new_song_album">Album</label>
					<input type="text" name="new_song_album" id="new_song_album" width="30" class="text ui-widget-content ui-corner-all" />
					
					<label for="new_song_year">Year</label>
					<input type="text" name="new_song_year" id="new_song_year" class="text small ui-widget-content ui-corner-all" />
					
					<div class="genresWrapper">
						<label for="select_genre" class="clear">Select genre</label>
						<p id="select_genre" style="margin-top: 0;">
							
						</p>
						<br class="clear" style="line-height: 15px;" />
					</div>
					<div class="playlistsWrapper">
						
						<label for="select_playlists" class="clear">Select playlists</label>
						<p id="select_playlists" style="margin-top: 0;">
							
						</p>
					</div>
				</div>
			</fieldset>
			</form>
		</div>
		
		<div id="dialog-channel" title="Add new channel">
			<p class="validateTips"></p>
			<form>
			<fieldset>
				<div id="new_channel_form_url">
					
					<label for="name">Enter channel url</label>
					<input type="text" name="new_channel_url" id="new_channel_url" class="text ui-widget-content ui-corner-all" />
					<a id="new_channel_cancel" class="clickable" style="display: none;">x</a>
				</div>
				
				<div style="display: none;" id="new_channel_form" />
					
				</div>
			</fieldset>
			</form>
		</div>
	</div>
	</body>
</html>